<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/css/arrow-box.css" />

    <link crossorigin="anonymous" integrity="sha384-FckWOBo7yuyMS7In0aXZ0aoVvnInlnFMwCv77x9sZpFgOonQgnBj1uLwenWVtsEj"
        href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">
                <h2>箭头提示文字</h2>
                <p>上下方向（toBottom、toTop）不需要 JS；提示 div 需指定宽度和 position: relative。</p>
                <div style="position: relative; height: 260px; line-height: 150px;overflow: hidden;">
                    <div class="tipsNote tipsNote-3" style="width: 300px;">
                        <div class="aj-arrow toBottom"></div>
                        <span>用户名等于账号名；不能与现有的账号名相同；注册后不能修改；</span>
                    </div>

                    <p class="foo" style="width: 600px; margin-left: 20%;">
                        <i>北上广深同比涨幅高达20%，26个主要城市涨幅超10%，69个城市房价上涨……</i>
                    </p>

                    <div class="tipsNote tipsNote-2" style="width: 450px;">
                        <div class="aj-arrow toTop"></div>
                        <span>用户名等于账号名；不能与现有的账号名相同；注册后不能修改；</span>
                    </div>
                    <div class="tipsNote tipsNote-1" style="width: 380px;">
                        <div class="aj-arrow toLeft"></div>
                        <span>用户名等于账号名；不能与现有的账号名相同；注册后不能修改；</span>
                    </div>
                    <div class="tipsNote tipsNote-0" style="width: 300px;">
                        <div class="aj-arrow toRight"></div>
                        <span>用户名等于账号名；不能与现有的账号名相同；注册后不能修改；</span>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>
</body>

</html>